<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>Vue-Router | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="Vue-Router1.简单配置创建router.js 1234567891011import Vue from &apos;vue&apos;import Router from &apos;vue-router&apos;import index from &apos;./components/index&apos;import user from &apos;./components/user&apos;Vue.use(Router)export default new">
<meta name="keywords" content="Vue">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue-Router">
<meta property="og:url" content="https://storm4542.github.io/archives/2869b8d0.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="Vue-Router1.简单配置创建router.js 1234567891011import Vue from &apos;vue&apos;import Router from &apos;vue-router&apos;import index from &apos;./components/index&apos;import user from &apos;./components/user&apos;Vue.use(Router)export default new">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2018-08-25T09:08:27.169Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Vue-Router">
<meta name="twitter:description" content="Vue-Router1.简单配置创建router.js 1234567891011import Vue from &apos;vue&apos;import Router from &apos;vue-router&apos;import index from &apos;./components/index&apos;import user from &apos;./components/user&apos;Vue.use(Router)export default new">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-VueRouter" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      Vue-Router
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2018-08-24T08:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="Vue-Router"><a href="#Vue-Router" class="headerlink" title="Vue-Router"></a>Vue-Router</h3><h4 id="1-简单配置"><a href="#1-简单配置" class="headerlink" title="1.简单配置"></a>1.简单配置</h4><p>创建router.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> Router <span class="keyword">from</span> <span class="string">'vue-router'</span></span><br><span class="line"><span class="keyword">import</span> index <span class="keyword">from</span> <span class="string">'./components/index'</span></span><br><span class="line"><span class="keyword">import</span> user <span class="keyword">from</span> <span class="string">'./components/user'</span></span><br><span class="line">Vue.use(Router)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Router(&#123;</span><br><span class="line">     routes:[</span><br><span class="line">        &#123;<span class="attr">path</span>:<span class="string">'/'</span>,<span class="attr">component</span>:index&#125;,</span><br><span class="line">        &#123;<span class="attr">path</span>:<span class="string">'/user'</span>,<span class="attr">component</span>:user&#125;,</span><br><span class="line">    ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>在main.js里加入根实例</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App.vue'</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">'./router'</span></span><br><span class="line"></span><br><span class="line">Vue.config.productionTip = <span class="literal">false</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    render: <span class="function"><span class="params">h</span> =&gt;</span> h(App),</span><br><span class="line">    router</span><br><span class="line">&#125;).$mount(<span class="string">'#app'</span>)</span><br></pre></td></tr></table></figure>
<p>在App.vue里使用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">        &lt;router-link to=&quot;/&quot;&gt;index&lt;/router-link&gt;</span><br><span class="line">        &lt;router-link to=&quot;/user&quot;&gt;info&lt;/router-link&gt;</span><br><span class="line">        &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    export default &#123;</span><br><span class="line">        name: &apos;app&apos;,</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h4 id="2-基础用法"><a href="#2-基础用法" class="headerlink" title="2.基础用法"></a>2.基础用法</h4><h5 id="1-动态路由匹配"><a href="#1-动态路由匹配" class="headerlink" title="1.动态路由匹配"></a>1.动态路由匹配</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//router.js</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Router(&#123;</span><br><span class="line">     routes:[</span><br><span class="line">        &#123;<span class="attr">path</span>:<span class="string">'/'</span>,<span class="attr">component</span>:index&#125;,</span><br><span class="line">        &#123;<span class="attr">path</span>:<span class="string">'/user/:id'</span>,<span class="attr">component</span>:user&#125;,</span><br><span class="line">    ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>可以以 冒号 标记参数，该参数可以通过 <code>this.$router.params.id</code>获得。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- user.vue --&gt;</span><br><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;id:&#123;&#123;id&#125;&#125;&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    export default &#123;</span><br><span class="line">        name: &quot;info&quot;,</span><br><span class="line">        computed:&#123;</span><br><span class="line">            id()&#123;</span><br><span class="line">                return this.$route.params.id</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p><strong>响应路由参数的变化</strong></p>
<blockquote>
<p>提醒一下，当使用路由参数时，例如从 <code>/user/1</code> 导航到 <code>/user/2</code>，<strong>原来的组件实例会被复用</strong>。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。<strong>不过，这也意味着组件的生命周期钩子不会再被调用</strong>。</p>
<p>复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) <code>$route</code> 对象：</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">       name: <span class="string">"info"</span>,</span><br><span class="line">       computed:&#123;</span><br><span class="line">           id()&#123;</span><br><span class="line">               <span class="keyword">return</span> <span class="keyword">this</span>.$route.params.id</span><br><span class="line">           &#125;</span><br><span class="line">       &#125;,</span><br><span class="line">       watch:&#123;</span><br><span class="line">           <span class="string">'$route'</span>(to,<span class="keyword">from</span>)&#123;</span><br><span class="line">               <span class="comment">//（到哪去，从哪来）</span></span><br><span class="line">               <span class="comment">//对路由变化做出响应</span></span><br><span class="line">           &#125;</span><br><span class="line">       &#125;</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>
<p>或者使用<code>beforeRouteUpdate(to,from,next)</code>守卫</p>
<h5 id="2-嵌套路由-children"><a href="#2-嵌套路由-children" class="headerlink" title="2.嵌套路由 children"></a>2.嵌套路由 children</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Router(&#123;</span><br><span class="line">    routes: [</span><br><span class="line">        &#123;</span><br><span class="line">            path: <span class="string">'/'</span>,</span><br><span class="line">            component: index</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            path: <span class="string">'/user/:id/'</span>,</span><br><span class="line">            component: user,</span><br><span class="line">            children: [</span><br><span class="line">                &#123;</span><br><span class="line">                    path: <span class="string">'profile'</span>,</span><br><span class="line">                    component: profile</span><br><span class="line">                &#125;</span><br><span class="line">            ]</span><br><span class="line">        &#125;,</span><br><span class="line">    ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>加上 children 以后不要以为万事大吉了,需要在 <code>user</code> 里面加上 <code>router-view</code> 标签，不然无法展示。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        id:&#123;&#123;$route.params.id&#125;&#125;</span><br><span class="line">        &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>
<p><strong>要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。</strong></p>
<p>你会发现，<code>children</code> 配置就是像 <code>routes</code> 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。</p>
<h5 id="3-编程式的导航"><a href="#3-编程式的导航" class="headerlink" title="3.编程式的导航"></a>3.编程式的导航</h5><p>之前我们写导航是这么写的：<code>&lt;router-link to=&quot;/user/1/profile&quot;&gt;&lt;/router-link&gt;</code>,这叫做声明式的导航。</p>
<p>除了使用 <code>&lt;router-link&gt;</code> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。</p>
<h2 id="route-push-location-onComplete-onAbort"><a href="#route-push-location-onComplete-onAbort" class="headerlink" title="route.push(location,onComplete?,onAbort?)"></a><code>route.push(location,onComplete?,onAbort?)</code></h2><p><strong>注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。</strong></p>
<p>想要导航到不同的 URL，则使用 <code>router.push</code> 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。</p>
<p>当你点击 <code>&lt;router-link&gt;</code> 时，这个方法会在内部调用，所以说，点击 <code>&lt;router-link :to=&quot;...&quot;&gt;</code> 等同于调用 <code>router.push(...)</code>。</p>
<table>
<thead>
<tr>
<th>声明式</th>
<th>编程式</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;router-link :to=&quot;...&quot;&gt;</code></td>
<td><code>router.push(...)</code></td>
</tr>
</tbody>
</table>
<p>该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 字符串</span></span><br><span class="line">router.push(<span class="string">'home'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象</span></span><br><span class="line">router.push(&#123; <span class="attr">path</span>: <span class="string">'home'</span> &#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 命名的路由</span></span><br><span class="line">router.push(&#123; <span class="attr">name</span>: <span class="string">'user'</span>, <span class="attr">params</span>: &#123; <span class="attr">userId</span>: <span class="number">123</span> &#125;&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 带查询参数，变成 /register?plan=private</span></span><br><span class="line">router.push(&#123; <span class="attr">path</span>: <span class="string">'register'</span>, <span class="attr">query</span>: &#123; <span class="attr">plan</span>: <span class="string">'private'</span> &#125;&#125;)</span><br></pre></td></tr></table></figure>
<p><strong>注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> userId = <span class="number">123</span></span><br><span class="line">router.push(&#123; <span class="attr">name</span>: <span class="string">'user'</span>, <span class="attr">params</span>: &#123; userId &#125;&#125;) <span class="comment">// -&gt; /user/123</span></span><br><span class="line">router.push(&#123; <span class="attr">path</span>: <span class="string">`/user/<span class="subst">$&#123;userId&#125;</span>`</span> &#125;) <span class="comment">// -&gt; /user/123</span></span><br><span class="line"><span class="comment">// 这里的 params 不生效</span></span><br><span class="line">router.push(&#123; <span class="attr">path</span>: <span class="string">'/user'</span>, <span class="attr">params</span>: &#123; userId &#125;&#125;) <span class="comment">// -&gt; /user</span></span><br></pre></td></tr></table></figure>
<p>同样的规则也适用于 <code>router-link</code> 组件的 <code>to</code> 属性。</p>
<p>在 2.2.0+，可选的在 <code>router.push</code> 或 <code>router.replace</code> 中提供 <code>onComplete</code> 和 <code>onAbort</code> 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。</p>
<p><strong>注意：</strong>如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 <code>/users/1</code> -&gt; <code>/users/2</code>)，你需要使用 <a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank"><code>beforeRouteUpdate</code></a> 来响应这个变化 (比如抓取用户信息)。</p>
<h2 id="route-replace-location-onComplete-onAbort"><a href="#route-replace-location-onComplete-onAbort" class="headerlink" title="route.replace(location,onComplete?,onAbort?)"></a><code>route.replace(location,onComplete?,onAbort?)</code></h2><p>和 push 很像，唯一不同的是，它不会向 history 添加记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。 这意味着，浏览器上的后退按钮将不会后退到前一个页面。</p>
<table>
<thead>
<tr>
<th>声明式</th>
<th>编程式</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;router-link :to=&quot;...&quot; replace&gt;</code></td>
<td><code>router.replace(...)</code></td>
</tr>
</tbody>
</table>
<h2 id="router-go-n"><a href="#router-go-n" class="headerlink" title="router.go(n)"></a><code>router.go(n)</code></h2><p>参数 n 是整数，意思是在 histroy 记录中向前或者向后几步。类似 <code>window.history.go(n)</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在浏览器记录中前进一步，等同于 history.forward()</span></span><br><span class="line">router.go(<span class="number">1</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 后退一步记录，等同于 history.back()</span></span><br><span class="line">router.go(<span class="number">-1</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 前进 3 步记录</span></span><br><span class="line">router.go(<span class="number">3</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果 history 记录不够用，那就默默地失败呗</span></span><br><span class="line">router.go(<span class="number">-100</span>)</span><br><span class="line">router.go(<span class="number">100</span>)</span><br></pre></td></tr></table></figure>
<h5 id="4-命名路由"><a href="#4-命名路由" class="headerlink" title="4.命名路由"></a>4.命名路由</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">routes: [</span><br><span class="line">      &#123;</span><br><span class="line">          name:<span class="string">'index'</span>,</span><br><span class="line">          path: <span class="string">'/'</span>,</span><br><span class="line">          component: index</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">          name:<span class="string">'user'</span>,</span><br><span class="line">          path: <span class="string">'/user/:id'</span>,</span><br><span class="line">          component: user,</span><br><span class="line">          children: [</span><br><span class="line">              &#123;</span><br><span class="line">                  name:<span class="string">'profile'</span>,</span><br><span class="line">                  path: <span class="string">'profile'</span>,</span><br><span class="line">                  component: profile</span><br><span class="line">              &#125;</span><br><span class="line">          ]</span><br><span class="line">      &#125;,</span><br><span class="line">  ]</span><br></pre></td></tr></table></figure>
<p>加上 name 会使我们在 push 和 to 操作的时候更加方便</p>
<p><code>route.push({name:&#39;user&#39;,params:{id:123}})</code></p>
<p><code>&lt;router-link :to=&#39;{name:&quot;user&quot;,params:{id:123}}&#39;&gt;&lt;/router-link&gt;</code></p>
<h5 id="5-命名视图"><a href="#5-命名视图" class="headerlink" title="5.命名视图"></a>5.命名视图</h5><p>当我们想在一个页面中展示两个视图组件的时候就用到命名视图了。</p>
<p>首先，在 router.js里修改。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">        name:<span class="string">'index'</span>,</span><br><span class="line">        path: <span class="string">'/'</span>,</span><br><span class="line">        components: &#123;   <span class="comment">//component ---&gt; components</span></span><br><span class="line">            <span class="keyword">default</span>:index,  <span class="comment">//默认index</span></span><br><span class="line">            a:profile       <span class="comment">// a是profile</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>
<p>在视图里增加入口。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>这样就可以展示两个视图组件了。</p>
<p><strong>嵌套命名视图</strong></p>
<p>简单的来说就是children里有命名视图</p>
<p>比如，我想在 /user/123/profile 里展示 profile 和 photo ，就像下面这么写。这样，user,profile,photo 这些视图组件就都在一个页面里了。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">         name:<span class="string">'user'</span>,</span><br><span class="line">         path: <span class="string">'/user/:id'</span>,</span><br><span class="line">         component: user,</span><br><span class="line">         children: [</span><br><span class="line">             &#123;</span><br><span class="line">                 name:<span class="string">'profile'</span>,</span><br><span class="line">                 path: <span class="string">'profile'</span>,</span><br><span class="line">                 components: &#123;</span><br><span class="line">                     <span class="keyword">default</span>: profile,</span><br><span class="line">                     a:photo</span><br><span class="line">                 &#125;</span><br><span class="line">             &#125;</span><br><span class="line">         ]</span><br><span class="line">     &#125;,</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">&lt;router-view name=&quot;a&quot;&gt;&lt;/router-view&gt;</span><br></pre></td></tr></table></figure>
<h5 id="6-重定向"><a href="#6-重定向" class="headerlink" title="6.重定向"></a>6.重定向</h5><p>重定向的三种方式。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = [</span><br><span class="line">    &#123;</span><br><span class="line">        name:<span class="string">'foo'</span></span><br><span class="line">        path:<span class="string">'/a'</span>,</span><br><span class="line">        redirect:<span class="string">'/b'</span></span><br><span class="line">	&#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        path:<span class="string">'/c'</span>,</span><br><span class="line">        redirect:<span class="string">'&#123;name:foo&#125;'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        path:<span class="string">'/a'</span>,</span><br><span class="line">        redirect:<span class="function"><span class="params">to</span>=&gt;</span>&#123;</span><br><span class="line">           <span class="comment">// 方法接收 目标路由 作为参数</span></span><br><span class="line">          <span class="comment">// return 重定向的 字符串路径/路径对象</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<p>注意<a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">导航守卫</a>并没有应用在跳转路由，上而仅仅应用在其目标上 ，第下面例子中，为 <code>/a</code> 路由添加一个 <code>beforeEach</code> 或 <code>beforeLeave</code> 守卫并不会有任何效果。 </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = [</span><br><span class="line">    &#123;</span><br><span class="line">        name:<span class="string">'foo'</span></span><br><span class="line">        path:<span class="string">'/a'</span>,</span><br><span class="line">        redirect:<span class="string">'/b'</span>,</span><br><span class="line">        beforeLeave(to,<span class="keyword">from</span>,next)&#123;&#125;</span><br><span class="line">	&#125;</span><br><span class="line">    ]</span><br></pre></td></tr></table></figure>
<h5 id="7-别名"><a href="#7-别名" class="headerlink" title="7.别名"></a>7.别名</h5><p>当我们想从<code>/a</code>跳转到<code>/b</code>，但是又不想改变URL，就用到了别名alias</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">'/a'</span>, <span class="attr">component</span>: A, <span class="attr">alias</span>: <span class="string">'/b'</span> &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><strong>/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。</strong> </p>
<h5 id="8-路由组件传参"><a href="#8-路由组件传参" class="headerlink" title="8.路由组件传参"></a>8.路由组件传参</h5><ul>
<li>$route</li>
</ul>
<p>比如我们要展示用户 alan 的个人主页，路由是<code>/user/alan/profile</code> , 可以通过 <code>$route.params.id</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;&#123;&#123;$route.params.id&#125;&#125;&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>props 布尔模式</li>
</ul>
<p>在路由配置中写入<code>props:true</code>,这样<code>route.params</code>会被设置为组件属性。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">          name:<span class="string">'user'</span>,</span><br><span class="line">          path: <span class="string">'/user/:id'</span>,</span><br><span class="line">          component: user,</span><br><span class="line">          props:<span class="literal">true</span>,</span><br><span class="line">          children: [</span><br><span class="line">              &#123;</span><br><span class="line">                  name:<span class="string">'profile'</span>,</span><br><span class="line">                  path: <span class="string">'profile'</span>,</span><br><span class="line">                  components: &#123;</span><br><span class="line">                      <span class="keyword">default</span>: profile,</span><br><span class="line">                      a:index</span><br><span class="line">                  &#125;,</span><br><span class="line">                  <span class="comment">// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：</span></span><br><span class="line">                  props: &#123;<span class="attr">default</span>:<span class="literal">true</span>,<span class="attr">a</span>:<span class="literal">false</span>&#125;</span><br><span class="line">              &#125;</span><br><span class="line">          ]</span><br><span class="line">      &#125;,</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">        &#123;&#123;id&#125;&#125;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    export default&#123;</span><br><span class="line">        props:[&apos;id&apos;]</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>props 对象模式</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">routes: [</span><br><span class="line">       &#123;</span><br><span class="line">           name:<span class="string">'index'</span>,</span><br><span class="line">           path: <span class="string">'/'</span>,</span><br><span class="line">           props:&#123;<span class="attr">username</span>:<span class="string">'map_name'</span>&#125;,</span><br><span class="line">           component:index</span><br><span class="line">       &#125;,</span><br><span class="line">    ]</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">        &#123;&#123;username&#125;&#125;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    export default&#123;</span><br><span class="line">        props:[&apos;username&apos;]</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>注意，此时的 props 必须是静态的。</p>
<ul>
<li>props 函数模式</li>
</ul>
<p>这样就可以动态生成 props ，比如Url 是 <code>/user/:id/postId/:postId</code>,我现在想把所有参数传进去</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">routes: [</span><br><span class="line">       &#123;</span><br><span class="line">           name:<span class="string">'user'</span>,</span><br><span class="line">           path: <span class="string">'/user/:id/postId/:postId'</span>,</span><br><span class="line">	   props:  <span class="function">(<span class="params">route</span>) =&gt;</span> (&#123; <span class="attr">params</span>: route.params &#125;) ,</span><br><span class="line">           component:User</span><br><span class="line">       &#125;,</span><br><span class="line">    ]</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">        &#123;&#123;params.id&#125;&#125;--&#123;&#123;params.postId&#125;&#125;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">default</span>&#123;</span><br><span class="line">        props:[<span class="string">'params'</span>]</span><br><span class="line">    &#125;</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
    <a href="cef93ee3.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          单元测试
        
      </div>
    </a>
  
  
    <a href="9eed9a2c.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">Vue--小知识</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/2869b8d0.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
